<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<div style="background-color: #f7f7f7; ">
    <input th:value="${id}" type="hidden" id="courseId"/>
    <input th:value="${type}" type="hidden" id="type"/>
    <input th:value="${isTestScores}" type="hidden" id="isTestScores"/>
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> >
            <a href="/cultivate/study/studyOnline">在线学习</a> > <a th:href="@{'/cultivate/study/studyInfo?id='+${id}+'&isTestScores='+${isTestScores}+'&taskId=&classId='}">学习详情</a>  > <span id="typeContent"></span></p>
    </div>
    <section>
        <div class="layui-container bt50">
        <div class="signinpanel">
            <div style="border-bottom: 1px solid #efefef">
                <div class="h1_1" id="showtime" style="border-bottom:none;padding:30px 0;"></div>
            </div>
            <div class="row">
                <div class="col-sm-9" style="border-right: 1px solid #e4e4e4;">
                    <div class="login_panel" style="margin: auto;width:100%;font-size:20px;">
                        <div id="content" style="margin-top:40px">
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>答题卡</h2>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul id="answer"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 40px">
                <div class="div-1" id="process" style="text-align: center">
                </div>
                <div class="div-1" style="text-align: center">
                    <input class="btn1 btn1-block" style="margin:10px auto" id="sub"  onclick="question();" value="交卷"/>
                </div>
            </div>
        </div>
        </div>
    </section>
</div>

<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script>
    var type = $("#type").val();
    if(type==0){
        $("#typeContent").text("练习试卷")
    }
    if(type==1){
        $("#typeContent").text("测试试卷")
    }
    var index = 0;
    var allsubject=0;
    var tpaperId='';
    $(function () {
        getData(0);
        //渲染答题卡选中状态
        $("#content").on("click",".mar10",function () {
            var that = $(this);
            var examId = that.parents('.titleEaxm').attr('data-id');
            var type = that.parents('.titleEaxm').attr('type');
            /*根据题目ID找到对应答题卡*/
            var cardLi = $('li[data-id=' + examId + ']');
            //多选题
            if(type==1){
                var a = true;//控制答题卡是否选中
                var b = false;//判断选项是否选中
                if(!that.find("input").prop('checked')){
                    that.siblings(".mar10").each(function () {
                        //选择了一个选项则为true
                        if($(this).find("input").prop('checked')){
                            b = true
                        }
                    });

                }else{
                    b = true;
                }
                if(a){
                    if(b){
                        cardLi.addClass('hasBeenAnswer');
                    }else{
                        cardLi.removeClass('hasBeenAnswer');
                    }
                }else {
                    cardLi.removeClass('hasBeenAnswer');
                }
            }else{
                if (!cardLi.hasClass('hasBeenAnswer')) {
                    cardLi.addClass('hasBeenAnswer');
                }
            }
        });
        //
        //点击答题卡跳转题目
        $("#answer").on("click",".anLi",function () {
            index = $(this).attr('data-index');
            toGo(index)

        });
        //答案存入缓存
        $("#content").on("change","input",function () {
            var subject = '';
            var answerList = [];
            $('.titleEaxm').each(function (i, res) {
                var that = $(this);
                //进度显示
                if (that.find($('input:checked')).val() != undefined) {
                    subject = subject * 1 + 1
                }
            });
            //题目完成进度
            var process = (subject / allsubject) * 100;
            $("#process").html("共" + allsubject + "道题目，已完成" + process.toFixed(2) + "%");
        });
    });
    function getData(titleNumber) {
        ajaxToken("/jzApi/topic/selpractice", 'GET',
            {
                type: $("#type").val(),
                id: $("#courseId").val()
            }, function (res) {
                tpaperId=res.id;
                var a = '<div>';//题目
                var c = '';//切换按钮
                var an = '';//答题卡
                allsubject = res.questions.length;
                $("#process").html("共" + allsubject + "道题目，已完成0%");
                res.questions.forEach(function (item, index, arr) {
                    //渲染答题卡
                    an += '<li class="anLi" data-index="' + index + '" data-id="' + item.id + '"><a href="#">' + parseInt(parseInt(index)+parseInt(1)) + '</a></li>';

                    //控制题目展示
                    let f = '';
                    if (titleNumber == index) {
                        f = 'contentBoxShow box'
                    } else {
                        f = 'contentBoxHide box'
                    }
                    var list = item.options.split(";;");
                    //     var pre = index-1;
                    //     var next = index+1;
                    var last = arr.length - 1;
                    var b = '', d = '', e = '';

                    //判断题目类型，写入题目描述
                    if (item.type == 0) {  //单选
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                        }
                        a += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' + parseInt(parseInt(index)+parseInt(1))+ '、（单选题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    //判断题目类型，写入题目描述
                    if (item.type == 2) { //判断
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '"  value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                        }
                        a += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div>' +  parseInt(parseInt(index)+parseInt(1)) + '、（判断题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    if (item.type == 1) {  //多选
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10"><input type="checkbox" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                        }
                        a += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '"  data-index="' + index + '"><div>' +  parseInt(parseInt(index)+parseInt(1)) + '、（多选题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    //当前题目为第一题则不能点击上一题，为最后一题不能点击下一题
                    if (index == 0) {
                        d = '<button class="btn1 not-allowed" disabled onclick="pre();">上一题</button>'
                    } else {
                        d = '<button class="btn1" id="pre" onclick="pre();">上一题</button>'
                    }
                    if (index == last) {
                        e = '<button class="btn1 not-allowed" disabled onclick="next();">下一题</button>'
                    } else {
                        e = '<button class="btn1" id="next" onclick="next();">下一题</button>'
                    }
                    c = '<div class="div-1 changebtn1" style="display:flex;justify-content:space-between;margin:40px 0 100px 0">' +
                        '<button class="btn1" onclick="first();">第一题</button>' +
                        d +
                        e +
                        '<button class="btn1" onclick="last();">最后一题</button></div>';
                    a += c;
                    a += '</div>';
                    // }
                });
                a += '</div>';
                $("#content").html(a);
                $("#answer").html(an)  //答题卡
            }
        )
    }
    function question() {
        layer.confirm("确定要交卷？", {
            btn: ['确定', '取消']
        }, function (index, layero) {
            submit()
        }, function (index) {
        });
    }

    function toGo(index) {
        changeCss(index)
    }

    function first() {
        index = 0;
        changeCss(index)
    }

    function last() {
        index =  allsubject - 1;
        changeCss(index)
    }

    function next() {
        index = parseInt(index) + parseInt(1);
        changeCss(index)
    }

    function pre() {
        index = parseInt(index) - parseInt(1);
        changeCss(index)
    }

    //控制题目展示
    function changeCss(index) {
        $('.box').each(function (i, res) {
            if (index == i) {
                $(this).addClass("contentBoxShow");
                $(this).removeClass("contentBoxHide");
            } else {
                $(this).addClass("contentBoxHide");
                $(this).removeClass("contentBoxShow")
            }
        });

    }
    countDown();
    function addZero(i) {
        return i < 10 ? "0" + i : i + "";
    }
    var second = 0;
    function countDown() {
        second++;
        var h = parseInt(second / (60 * 60) % 24);
        var m = parseInt(second / 60 % 60);
        var s = parseInt(second % 60);
        // d = addZero(d)
        h = addZero(h);
        m = addZero(m);
        s = addZero(s);
        document.querySelector("#showtime").innerHTML =  h + '时' + m + '分' + s + '秒';
        setTimeout(countDown, 1000);
    }
    //提交答卷
    function submit() {
        var answerList = [];
        $('.titleEaxm').each(function (i, res) {
            var that = $(this);
            var che ='';
            var type = that.find("input").attr("type");
            //单选、判断
            if (type == 'radio') {
                var rad ='';
                if(that.find($('input:checked')).val()!='' && that.find($('input:checked')).val() !=undefined){
                    rad =that.find($('input:checked')).val().substring(0,1)
                }
                answerList.push({id: that.attr("data-id"), value: rad});
            } else if (type == 'checkbox') { //多选
                that.find('input:checkbox:checked').each(function (i) {
                    if($(this).val()!=''){
                        che += $(this).val().substring(0,1) +';;'
                    }
                });
                answerList.push({id: that.attr("data-id"), value: che});
            }
        });
        ajaxToken("/jzApi/topic/addAnswerSheet", 'POST',
            {   tpaperId:tpaperId,
                type: $("#type").val(), //0练习，1测试
                time:second,//(单位：秒)
                answerList:JSON.stringify(answerList)
            }, function (res) {
                if($("#type").val()==1){
                    layer.confirm("分数为"+res.score+"分", {
                        closeBtn:0,
                        btn: ['返回学习'],
                        yes: function(index, layero){
                            location.href='/cultivate/study/studyOnline';
                        }
                    });
                }else{
                    layer.confirm("分数为"+res.score+"分", {
                        closeBtn:0,
                        btn: ['查看解析', '返回学习'],
                        yes: function(index, layero){
                            location.href='/cultivate/study/studyAnswerDetail?answerId='+res.answerId+'&courseId='+$("#courseId").val()
                        },
                        btn2: function(index, layero){
                            location.href='/cultivate/study/studyOnline';
                            return false
                        }
                    });
                }

            }
        )
    }


</script>

</html>